<template>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <van-icon name="arrow-left" size="30" class="header-left" @click="goBack" />
            填写服务订单
        </div>
        <!-- 状态栏 -->
        <StatusBar item="0" />
        <!-- 服务内容 单元格 -->
        <van-cell class="cell">
            <template #title>
                <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
                <span class="server-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <!-- 表单 -->
        <van-cell-group class="cell">
            <!-- 就诊医院 -->
            <van-cell>
                <template #title>就诊医院</template>
                <template #default>
                    <div @click="showHospital = true">
                        {{ form.hospital_name || '请选择医院' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 就诊时间 -->
            <van-cell>
                <template #title>就诊时间</template>
                <template #default>
                    <div @click="showStartTime = true">
                        {{ currentDate || '请选择就诊时间' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 陪诊师 -->
            <van-cell>
                <template #title>陪诊师</template>
                <template #default>
                    <div @click="showCompanion = true">
                        {{ companionName || '请选择陪诊师' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <!-- 接送地址 -->
            <van-cell>
                <template #title>接送地址</template>
                <template #default>
                    <van-field class="text" input-align="right" v-model="form.receiveAddress" placeholder="请输入接送地址" />
                </template>
            </van-cell>
            <!-- 联系电话 -->
            <van-cell>
                <template #title>联系电话</template>
                <template #default>
                    <van-field class="text" input-align="right" v-model="form.tel" placeholder="请输入联系电话" />
                </template>
            </van-cell>
        </van-cell-group>
        <!-- 服务需求 -->
        <van-cell-group title="服务需求" class="cell">
            <van-cell>
                <template #default>
                    <van-field class="text" style="height: 100px" v-model="form.demand" placeholder="请简单描述您要就诊的科室" />
                </template>
            </van-cell>
        </van-cell-group>
        <!-- 提交按钮 -->
        <van-button type="primary" class="sumbit" size="large" @click="submitOrder">提交订单</van-button>

        <!-- 就诊医院 弹出层 -->
        <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
            <van-picker title=" 医院" :columns="showHospitalColumns" @confirm="showHospitalConfirm"
                @cancel="showHospital = false" />
        </van-popup>
        <!-- 就诊时间 弹出层 -->
        <van-popup v-model:show="showStartTime" position="bottom" :style="{ height: '30%' }">
            <van-date-picker title="选择日期" :min-date="minDate" @confirm="showTimeConfirm"
                @cancel="showStartTime = false" />
        </van-popup>
        <!-- 陪诊师 弹出层 -->
        <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '30%' }">
            <van-picker title="选择陪诊师" :columns="showCompanionColumns" @confirm="showCompanionConfirm"
                @cancel="showCompanion = false" />
        </van-popup>

        <!-- 微信支付二维码弹窗 -->
        <van-dialog v-model:show="showCode" :show-confirm-button="false">
            <van-icon name="cross" class="close" @click="closeCode" />
            <div>微信支付</div>
            <van-image :src="codeImg" width="150" height="150" />
            <div>请使用微信扫一扫</div>
        </van-dialog>
    </div>
</template>

<script setup name="createOrder">
import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue'
import { useRouter } from 'vue-router'
import StatusBar from '../../components/statusBar.vue'
import QRCode from 'qrcode' // 引入微信支付插件
const router = useRouter()

// 获取当前vue实例
const { proxy } = getCurrentInstance()

// 就诊医院弹出层
const showHospital = ref(false)

// 就诊时间
const currentDate = ref()
// 就诊时间弹出层
const showStartTime = ref(false)
// 最小日期
const minDate = ref(new Date())

// 陪诊师弹出层
const showCompanion = ref(false)

// 微信支付二维码弹窗
const showCode = ref(false)
// 微信支付二维码图片
const codeImg = ref('')
// 关闭二维码弹窗
const closeCode = () => {
    showCode.value = false
    router.push('/order')
}

// 创建订单信息
const createInfo = reactive({
    companion: [],
    companion_name: [],
    service: {}
})

// 表单
const form = reactive({
    hospital_id: '',
    hospital_name: '',
    starttime: '',
    companion_id: '',
    receiveAddress: '',
    tel: '',
    demand: ''
})

onMounted(async () => {
    // 获取陪护师列表 订单详情
    const { data } = await proxy.$api.h5Companion()
    Object.assign(createInfo, data.data)
    console.log(createInfo)
})

// 点击返回上一页
const goBack = () => {
    router.go(-1)
}

// 就诊医院列表 计算属性 数据变化时重新计算
const showHospitalColumns = computed(() => {
    return createInfo.hospitals.map(item => {
        return {
            text: item.name,
            value: item.id
        }
    })
})

// 确认就诊医院
const showHospitalConfirm = (item) => {
    console.log(item)
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    showHospital.value = false
}

// 确认就诊时间
const showTimeConfirm = (item) => {
    console.log(item)
    const dateStr = item.selectedValues.join('-') // 2025-06-09
    currentDate.value = dateStr
    // new Date(dateStr) 2025-06-09T00:00:00.000Z
    form.starttime = new Date(dateStr).getTime() // 1717900800000
    showStartTime.value = false
}

// 陪诊师列表 计算属性 数据变化时重新计算
const showCompanionColumns = computed(() => {
    return createInfo.companion.map(item => {
        return {
            text: item.name,
            value: item.id
        }
    })
})
// 陪诊师id
const companionName = ref()
// 确认陪诊师
const showCompanionConfirm = (item) => {
    console.log(item)
    form.companion_id = item.selectedOptions[0].value
    companionName.value = item.selectedOptions[0].text
    showCompanion.value = false
}

// 提交订单
const submitOrder = async () => {
    for (let key in form) {
        if (!form[key]) {
            showNotify({ type: 'primary', message: '请填写每一项内容' });
            return
        }
    }
    const { data: orderRes } = await proxy.$api.createOrder(form)  //微信支付地址 需要安装微信支付插件 npm install --save qrcode
    console.log(orderRes)
    // 生成二维码
    QRCode.toDataURL(orderRes.data.wx_code).then((qrcoderUrl) => {
        console.log(qrcoderUrl)
        showCode.value = true // 显示二维码弹窗
        codeImg.value = qrcoderUrl // 设置二维码图片
    })
}
</script>

<style lang="less" scoped>
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
        float: left;
    }
}

.cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
        color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
        display: flex;
        align-items: center;
    }

    .server-name {
        margin-left: 10px;
    }
}

.service-text {
    background: url() no-repeat center center;
    background-size: 20px;
}

.sumbit {
    position: absolute;
    bottom: 0;
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>